<template>
  <div class="main-content">
    <div class="order-header">
      <div style="display: flex; align-items: center; justify-content: center">
        <el-button icon="el-icon-arrow-left" circle size="small" @click="backToStore"></el-button>
        <h1 style="margin-left: 20px;" v-if="currentStep === 2">订单信息</h1>
        <h1 style="margin-left: 20px;" v-else>下单成功</h1>
      </div>
      <el-steps :active="currentStep" finish-status="success" class="order-step" >
        <el-step title="选择商品"></el-step>
        <el-step title="确认订单信息"></el-step>
        <el-step title="成功提交订单"></el-step>
      </el-steps>
    </div>
    <div v-if="currentStep === 2">
      <!--Contact-->
      <Contact class="contact-container" @choose="chooseContact"></Contact>
      <div class="order-details">
        <el-card class="product-items">
          <div slot="header" class="clearfix"><span>{{ this.$store.state.currentShoppingCart.store['name'] }}</span></div>
          <el-row class="product-item product-item-title-container">
            <el-col :span="6" class="product-item-content product-item-title"></el-col>
            <el-col :span="6" class="product-item-content product-item-title">商品</el-col>
            <el-col :span="6" class="product-item-content product-item-title">份数</el-col>
            <el-col :span="6" class="product-item-content product-item-title">总计</el-col>
          </el-row>
          <div v-for="item in this.$store.state.currentShoppingCart.items" :key="item.product['id']" class="text item mb">
            <el-row class="product-item">
              <el-col :span="6" class="product-item-content">
                <img :src="that.$common.getResourceUrl(item.product['images'])" class="product-image">
              </el-col>
              <el-col :span="6" class="product-item-content">{{ item.product['name']}}</el-col>
              <el-col :span="6" class="product-item-content">
                <el-input-number size="mini" v-model="item.count" :min="0" :max="item.product['quantity']" @change="updateCartItem"></el-input-number>
              </el-col>
              <el-col :span="6" class="product-item-content">￥ {{ (item.product['price'] * item.count) }}</el-col>
            </el-row>
          </div>
          <el-row class="product-item delivery-item">
            <el-col :span="6" class="product-item-content">配送费</el-col>
            <el-col :span="12" class="product-item-content"></el-col>
            <el-col :span="6" class="product-item-content">￥ {{ this.$store.state.currentShoppingCart.store['storeInformation']['deliveryCost'] }}</el-col>
          </el-row>
          <div class="total-price">
            <el-row class="product-item total-item">
              <el-col :span="18" class="product-item-content"></el-col>
              <el-col :span="6" class="product-item-content total-price-txt">￥ {{ getTotalPrice }}</el-col>
            </el-row>
          </div>
        </el-card>
        <el-card class="order-items">
          <div class="order-item">
            <h3>请您确认信息</h3>
          </div>
          <div class="order-item">
            <h4>收货地址</h4>
            <p class="order-item-txt">联系人: <span v-if="orderContact">{{ orderContact['contactname'] }}</span></p>
            <p class="order-item-txt">收货地址: <span v-if="orderContact">{{ orderContact['address'] }}</span></p>
            <p class="order-item-txt">联系电话: <span v-if="orderContact">{{ orderContact['phone'] }}</span></p>
          </div>
          <div class="order-item">
            <h4>支付方式</h4>
            <div class="order-pay-patterns">
              <div class="order-pay-pattern" style="margin-right: 16px;"
                   :class="{ 'order-pay-pattern-selected': (payPattern === 'wechat') }" @click="payPattern='wechat'">
                <img src="../../../assets/images/customer/pay_pattern_wechat.png"/>
                <span class="order-pay-pattern-txt">微信支付</span>
              </div>
              <div class="order-pay-pattern"
                   :class="{ 'order-pay-pattern-selected': (payPattern === 'alipay') }" @click="payPattern='alipay'">
                <img src="../../../assets/images/customer/pay_pattern_alipay.png"/>
                <span class="order-pay-pattern-txt">支付宝支付</span>
              </div>
            </div>
          </div>
          <div class="order-item">
            <h4>备注信息</h4>
            <el-input
              type="textarea"
              placeholder="请输入备注内容"
              v-model="orderRemarks">
            </el-input>
          </div>
          <div class="order-item" style="margin: 30px 0;">
            <el-button type="primary" @click="submitOrder">提交订单</el-button>
          </div>
        </el-card>
      </div>
    </div>
    <div v-else style="margin-top: 30px;">
      <el-card>
        <div style="display: flex">
          <img src="../../../assets/images/customer/order_success.png" style="width: 100px; height: 100px; margin: 30px; opacity: 0.5"/>
          <div>
            <h2>商家已收到您的订单！</h2>
            <h4 style="color: #515151">您可以在个人中心中查看您的订单，如有问题请联系客服！</h4>
            <p style="color: #a2a2a2">期待您再次使用ele-monkey</p>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import Contact from './Contact'
export default {
  name: 'OrderDetail',
  components: {Contact},
  data () {
    return {
      that: this,
      orderContact: null,
      orderRemarks: '',
      payPattern: 'wechat',
      currentStep: 2
    }
  },
  methods: {
    backToStore () {
      if (this.currentStep === 3) {
        this.$store.state.currentShoppingCart.removeAllProduct()
      }
      this.$router.push('/customer/store/' + this.$store.state.currentShoppingCart.store['id'])
    },
    chooseContact (contact) {
      this.orderContact = contact
    },
    updateCartItem (val) {
      if (val === 0) {
        let removeItem = null
        this.$store.state.currentShoppingCart.items.forEach((item) => {
          if (item.count === 0) {
            removeItem = item
          }
        })
        if (removeItem !== null) {
          this.$store.state.currentShoppingCart.items.splice(this.$store.state.currentShoppingCart.items.indexOf(removeItem), 1)
        }
      }
      if (this.getTotalCount === 0) {
        this.$router.push('/customer/store/' + this.$store.state.currentShoppingCart.store['id'])
      }
    },
    submitOrder () {
      if (this.orderContact === null) {
        this.$message({ type: 'warning', message: '请确认收货地址！' })
        return
      }
      let orderItems = []
      this.$store.state.currentShoppingCart.items.forEach((item) => {
        orderItems.push({
          'productId': item.product['id'],
          'productName': item.product['name'],
          'productPrice': item.product['price'],
          'productCount': item.count,
          'productImage': item.product['images']
        })
      })
      this.$merchantAPI.order_add({
        'userId': this.$store.state.currentUser.id,
        'storeId': this.$store.state.currentShoppingCart.store['id'],
        'contactname': this.orderContact['contactname'],
        'totalPrice': this.getTotalPrice,
        'address': this.orderContact['address'],
        'phone': this.orderContact['phone'],
        'deliveryCost': this.$store.state.currentShoppingCart.store['storeInformation']['deliveryCost'],
        'remarks': this.orderRemarks + ' - 支付方式: ' + this.payPattern,
        'orderItems': orderItems
      }).then((params) => {
        this.currentStep = 3
      }).catch((params) => {
        this.$message({ type: 'error', message: '下单失败，请检查订单或联系客服！' })
      })
    }
  },
  computed: {
    getTotalCount () {
      let total = 0
      this.$store.state.currentShoppingCart.items.forEach((item) => {
        total += item.count
      })
      return total
    },
    getTotalPrice () {
      let total = 0
      this.$store.state.currentShoppingCart.items.forEach((item) => {
        total += (item.count * item.product['price'])
      })
      return total + this.$store.state.currentShoppingCart.store['storeInformation']['deliveryCost']
    }
  }
}
</script>

<style scoped>
  .main-content {
    padding: 20px 50px 80px 50px;
    margin: 50px 280px;
    min-height: 500px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    display: flex;
    flex-direction: column;
  }
  .order-header {
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .order-step {
    width: 500px;
  }
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 30px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .contact-container{
    width: 100%;
    height: 245px;
    padding: 15px 0;
    overflow-x: auto;
    margin: 36px 0;
  }
  .order-details {
    display: flex;
  }
  .product-items {
    width: 60%;
    padding: 10px 30px;
  }
  .product-item {
    display: flex;
    align-items: center;
    color: #515151;
    font-size: 14px;
    letter-spacing: 2px;
  }
  .product-image {
    width: 70px;
    height: 70px;
    border-radius: 6px;
    display: block;
  }
  .product-item-content {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .product-item-title-container {
    border-bottom: 1px solid rgba(0,0,0,0.2);
    padding-bottom: 12px;
    margin-bottom: 22px;
  }
  .product-item-title {
    font-size: 14px;
    letter-spacing: 2px;
    color: #a2a2a2
  }
  .delivery-item {
    margin-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.2);
    padding-top: 20px;
    color: rgba(0,0,0,.3);
  }
  .total-price{
    margin-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.2);
    padding: 20px 0;
  }
  .total-price-txt {
    font-size: 28px;
    letter-spacing: 1px;
    color: #F56C6C;
    font-weight: bold;
  }
  .order-items {
    width: 40%;
    margin-left: 40px;
    padding: 10px 30px;
  }
  .order-item {
    display: flex;
    flex-direction: column;
  }
  .order-item-txt {
    margin: 6px 0;
    font-size: 13px;
    line-height: 28px;
    color: #515151;
  }
  .order-pay-patterns {
    display: flex;
  }
  .order-pay-pattern {
    display: flex;
    align-items: center;
    padding: 6px 20px;
    float: left;
    border:3px solid #ddd;
    border-image: -webkit-linear-gradient(#e8e8e8,#e8e8e8) 3 3;
    border-image: -moz-linear-gradient(#e8e8e8,#e8e8e8) 3 3;
    border-image: linear-gradient(#e8e8e8,#e8e8e8) 3 3;
    cursor: pointer;
  }
  .order-pay-pattern-selected {
    border:3px solid #ddd;
    border-image: -webkit-linear-gradient(#96deda,#50c9c3) 3 3;
    border-image: -moz-linear-gradient(#96deda,#50c9c3) 3 3;
    border-image: linear-gradient(#96deda,#50c9c3) 3 3;
  }
  .order-pay-pattern-txt {
    font-size: 16px;
    letter-spacing: 2px;
    margin-left: 16px;
  }
</style>
